<template>
    <div class="formulaCalculation">
        <el-input-number 
            v-model="value"
            controls-position="right"
            :placeholder="calcPlaceholder"
            :disabled="calcDisabled"
            :precision="calcPrecision"
            @change='handleChange'
        >
        </el-input-number>
        <div class="calculation" @click="calculation">
            <span class="el-icon-film"></span>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: undefined,
        }
    },
    props: {
        iptAttritube: {
            type: Object,
            default: () => {}
        }
    },
    computed:{
        calcPlaceholder(){
            return this.iptAttritube.guideText || '请填写'
        },
        calcDisabled(){
            let attr = JSON.parse(this.iptAttritube.fieldAttribute)
            return attr.disabled || false
        },
        calcPrecision(){
            let attr = JSON.parse(this.iptAttritube.fieldAttribute)
            return attr.precision || 0
        },
    },
    methods: {
        handleChange() {
            let value = {
                value: this.value,
                state: true
            }
            this.$emit('handleChange', value)
        },
        defaultData(d) {
            d.map(item => {
                if(item.customFieldId == this.iptAttritube.id) {
                    this.value = item.value
                }
            })
        },
        removeSure() {
            
        },
        calculation() {
            this.$emit('calculationChildren',this.iptAttritube.chineseName,this.iptAttritube.id)
        }
    },
}
</script>

<style scoped lang="less">
.formulaCalculation {
    position: relative;
    .calculation {
        width: 28px;
        height: 28px;
        border: 1px solid #d3d8e3;
        position: absolute;
        right: -35px;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        span {
            font-size: 18px;
        }
        span:hover {
            color: #b8bfcf;
        }
    }
}
</style>